<template lang="html">
  <div id="height">
     <div class="wrapper">
       <div class="item">
         <h1>你的年龄？</h1>
         <input type="number"  id="age" placeholder="请输入...岁" v-model.number="age" @focus="top($event)">

       </div>
        <div class="item">
          <h1>你的身高？</h1>
          <input type="number"  id="height" placeholder="请输入...cm" v-model.number="height" @focus="top($event)">

        </div>
        <div class="item">
          <h1>你的体重？</h1>
          <input type="number" id="weight" placeholder="请输入...kg" v-model.number="weight" @focus="top($event)">
        </div>
     </div>
     
        <span class="next" @click="judge" id="next" >
            完成
        </span>
    <div v-if="!showBtn" class="nextWrapper"></div>
    <transition name="slide-fade">
      <div class="tip" id="tip">
        请输入正确的数据
      </div>
    </transition>

     <Loading v-if="LoadingShow"></Loading>
  </div>
</template>

<script>
    import {
        showFooter,
        hideFooter,
        errFun,
        refreshTitle
    } from "../../tools.js";
    import Loading from '../loading';
    import api from '../../api';

    export default {
        components: {
            Loading
        },
        data() {
            return {
                height: null,
                weight: null,
                age: null

            }
        },
        create() {
            // this.$store.dispatch('GET_USER_INFO');
        },
        computed: {
            LoadingShow() {
                return this.$store.state.loadings.show
            },
            showBtn() {
                if (this.height != null && this.weight != null && this.age != null && this.height > 0 && this.height < 300 && this.weight > 0 && this.weight < 300 && this.age > 0 && this.age < 200) {
                    return true;
                } else {
                    return false;
                }
            }

        },
        created() {
            refreshTitle(this.$route.meta.title);
        },
        methods: {
            judge() {
                // console.log(this.height, this.weight);

                if (this.height != null && this.weight != null && this.age != null && this.height > 0 && this.height < 300 && this.weight > 0 && this.weight < 300 && this.age > 0 && this.age < 200) {
                    var that = this;
                    //console.log(typeof this.height);
                    api.setUserInfoH(this.age, this.height, this.weight).then(response => {
                        if (response.status == 200) {
                            // 往上跳转到提示登录的页面
                            that.$router.go(-1);
                        }
                    })

                } else {
                    document.getElementById('tip').style.display = 'block';
                    document.querySelectorAll("input[type=number]")[0].style.color = '#f2526a';
                    document.querySelectorAll("input[type=number]")[0].style.borderBottomColor = '#f2526a';
                    document.querySelectorAll("input[type=number]")[1].style.color = '#f2526a';
                    document.querySelectorAll("input[type=number]")[1].style.borderBottomColor = '#f2526a';
                    document.querySelectorAll("input[type=number]")[2].style.color = '#f2526a';
                    document.querySelectorAll("input[type=number]")[2].style.borderBottomColor = '#f2526a';
                }
            },

            top(e) {
                document.getElementById('tip').style.display = 'none';
                // document.getElementById('next').style.display = 'none';
                // console.log(document.querySelectorAll("input[type=number]")[0].getBoundingClientRect().top);
                // console.log(document.querySelectorAll("input[type=number]")[1].getBoundingClientRect().top);
                //console.log(e.currentTarget);
                if (e.currentTarget == document.querySelectorAll("input[type=number]")[1]) {
                    document.querySelectorAll("input[type=number]")[1].scrollTop = 150;
                    //console.log(document.body.scrollTop);
                }

            },
        },
        mounted() {
            this.$nextTick(function() {
                // 代码保证 this.$el 在 document 中
                //实现底部的动画效果及取消padding值
                var app = document.getElementById('app');
                app.style.paddingBottom = "0px";
                var footer = document.getElementById('footer');
                hideFooter(footer);
                //或取btn按钮，判断显示与隐藏
                var btn = document.querySelector(".btn");
                var btnwrapper = document.querySelector(".btnwrapper");
            });
        },
        beforeDestroy() {
            var app = document.getElementById('app');
            app.style.paddingBottom = "50px";
            var footer = document.getElementById('footer');
            showFooter(footer);
        },

        watch: {
            age: function(newVal, oldVal) {
                if (newVal < 0 || newVal > 200) {
                    // console.log('haha');
                    document.getElementById('tip').style.display = 'block';
                    document.querySelectorAll("input[type=number]")[0].style.color = '#f2526a';
                    document.querySelectorAll("input[type=number]")[0].style.borderBottomColor = '#f2526a';
                } else {
                    document.getElementById('tip').style.display = 'none';
                    document.querySelectorAll("input[type=number]")[0].style.color = '#fdb801';
                    document.querySelectorAll("input[type=number]")[0].style.borderBottomColor = '#fdb801';
                }

            },
            height: function(newVal, oldVal) {
                if (newVal < 0 || newVal > 300) {
                    // console.log('haha');
                    document.getElementById('tip').style.display = 'block';
                    document.querySelectorAll("input[type=number]")[1].style.color = '#f2526a';
                    document.querySelectorAll("input[type=number]")[1].style.borderBottomColor = '#f2526a';
                } else {
                    document.getElementById('tip').style.display = 'none';
                    document.querySelectorAll("input[type=number]")[1].style.color = '#fdb801';
                    document.querySelectorAll("input[type=number]")[1].style.borderBottomColor = '#fdb801';
                }

            },
            weight: function(newVal, oldVal) {
                if (newVal < 0 || newVal > 500) {
                    // console.log('haha');
                    document.getElementById('tip').style.display = 'block';
                    document.querySelectorAll("input[type=number]")[2].style.color = '#f2526a';
                    document.querySelectorAll("input[type=number]")[2].style.borderBottomColor = '#f2526a';
                } else {
                    document.getElementById('tip').style.display = 'none';
                    document.querySelectorAll("input[type=number]")[2].style.color = '#fdb801';
                    document.querySelectorAll("input[type=number]")[2].style.borderBottomColor = '#fdb801';
                }
            },

        }
    }
</script>

<style lang="css">
    #height {
        .wrapper {
            /*position: relative;*/
            color: #fff;
            width: 80%;
            margin-top: 10%;
            margin-bottom: 10%;
            height: 100%;
            margin-left: 10%;
            text-align: center;
            .item {
                margin-bottom: 12%;
                h1 {
                    font-size: 1.9rem;
                    font-weight: 500;
                    padding: 5%;
                }
                input[type=number] {
                    margin-top: 5%;
                    font-size: 1.2rem;
                    text-align: center;
                    border-bottom: 0.5px solid #fdb801;
                    background-color: transparent;
                    color: #fdb801;
                    outline: medium;
                }
                input[type=number]::-webkit-input-placeholder {
                    color: #fdb801;
                }
                input[type=number]:focus::-webkit-input-placeholder {
                    color: transparent;
                }
            }
        }
        .next {
            position: fixed;
            bottom: 10%;
            left: 20%;
            color: #161616;
            font-size: 1.2rem;
            line-height: 40px;
            display: block;
            text-align: center;
            border-radius: 2rem;
            background-color: #fdb801;
            width: 60%;
            height: 40px;
            box-sizing: border-box;
            margin: 0 auto;
        }
        .nextWrapper {
            position: fixed;
            bottom: 10%;
            left: 20%;
            color: #161616;
            font-size: 1.2rem;
            line-height: 40px;
            height: 40px;
            display: block;
            text-align: center;
            border-radius: 2rem;
            background-color: rgba(0, 0, 0, .6);
            width: 60%;
            box-sizing: border-box;
            margin: 0 auto;
        }
        .tip {
            display: none;
            width: 100%;
            line-height: 3;
            position: absolute;
            font-size: 1.2rem;
            color: #161616;
            text-align: center;
            bottom: 15%;
            background-color: #717787;
        }
    }
</style>